<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>作业列表</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../pub/element-ui.css">
	<script src="../pub/vue.min.js"></script>
	<script src="../pub/axios.min.js"></script>
	<!-- 引入组件库 -->
	<script src="../pub/element.js"></script>

	<style type="text/css">
		html,
		body,
		#app {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}

		ul {
			width: 100%;
			height: auto;

			margin: 0px;
		}

		ul li {

			list-style-type: none;
			list-style-image: url(./yuan.png);


		}

		.msg {
			font-size: 27px;
			height: 225px;
			margin-left: 30px;
		}

		.tital {

			font-size: 50px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin: 10px;

		}

		.right {
			float: right;
			position: relative;
			top: -200px;
			right: 10%;
			text-align: center;
			line-height: 70px;
		}

		.line {
			width: 100%;
			height: 1px;
			background-color: #EDEDED;
			margin-top: 10px;
		}


		.grey {
			color: #7E7E7E;
		}

		.el-button {

			width: 100%;
			height: 130%;
			font-size: 40px;
			font-family: PingFang SC;

			color: #FFFEFE;

		}

		.balck {

			display: grid;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 50%;

		}

		.black-img {
			margin: 0 auto;
			margin-bottom: 20px;
			text-align: center;
		}

		.black-span {
			display: block;
			margin: 0 auto;
			color: #7E7E7E;
			text-align: center;
		}

		#more {
			background-color: white;
			color: slategray;
			border: none;
		}
	</style>

</head>

<body>
	<div id="app">
		<div class="balck" v-if="tableData.length==0" key="1">
			<img class="black-img" style="width: auto;" src="./haveNoData.png" alt="" srcset="">
			<br>
			<span class="black-span">当前没有本项目的内容哦</span>
		</div>
		<div v-else key="2">
			<ul v-for="item in tableData">
				<div class="yuan"></div>
				<li>
					<div id="" class="msg clearfix">
						<div id="" class="tital">
							{{item.courseName}}
						</div>
						<div id="className" class="grey">
							课程名称：{{item.projectName}}
						</div>
						<div id="classType" class="grey">
							课程类型：{{item.courseType}}
						</div>
						<div id="Teacher" class="grey">
							批阅老师：{{item.issuer}}
						</div>
						<div id="" class="right">
							<div id="tableDate" class="grey">
								{{item.createTime}}
							</div>
							<div id="">
								<el-button type="primary" @click="listItem(item)">评价详情</el-button>
							</div>
						</div>
					</div>
					<div id="" class="line"></div>
				</li>
			</ul>
			<div>

				<el-button id="more" @click="more()" type="info">点击显示更多</el-button>

			</div>
		</div>
	</div>


	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data() {
				return {
					http: '' + localStorage.getItem("http"),
					tableData: [],
					pageNum: 1,
					endRow: "",
					total: "",

				}
			},
			created() {
				this.getPage()
			},
			methods: {
				getPage() { //获取当前页面的内容
					axios.get(this.http + "/project/meiGeXueShengDeRenWuYuLan", {
						params: {
							"Status": 3,
							"pageNum": this.pageNum,
							"pageSize": 6,
							"StudentUserId": localStorage.getItem("childId"),
							"courseType": "" + localStorage.getItem("courseType"),
						}
					})
						.then(res => {
							console.log(res);
							for (x in res.data.data.list) {
								this.tableData.push(res.data.data.list[x])
							}
							this.endRow = res.data.data.endRow
							this.total = res.data.data.total
						})
				},
				listItem(data) {
					localStorage.setItem("itemId", data.id)
					location.href = "../details/details.html"
				},
				more() {
					this.pageNum++
					this.getPage()
					if (this.endRow = this.total) {
						document.getElementById("more").innerText = "我已经到底线啦"
					}
				}

			}

		})
	</script>
</body>

</html>